<script type="text/javascript" src="/js/pages/userEdit.js"></script>
<th:block layout:include="fragments/ui :: main (title='用户详细')">
    <th:block layout:fragment="main-breadcrumb">
        <li><a href="#/user.html"><i class="fa fa-user"></i> 用户列表</a></li>
        <li class="active" th:text="${title}"></li>
    </th:block>
    <th:block layout:fragment="main-content">
        <th:block layout:include="fragments/ui :: box (title='用户详细', iconClass='fa-bars')">
            <th:block layout:fragment="box-content">
                <form id="updateUserForm" class="form-horizontal" method="post">
                    <input type="hidden" class="form-control" id="id" name="id" placeholder="id" th:value="${user.id}" />
                    <div class="form-group">
                        <label for="phone" class="col-sm-2 control-label">手机号</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="phone" name="phone" placeholder="手机号" th:value="${user.phone}" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="email" name="email" placeholder="邮箱" th:value="${user.email}" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="name" name="name" placeholder="姓名" th:value="${user.name}" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-4">
                            <select id="status" name="status" class="form-control">
                                <option value="normal" th:selected="${#strings.equals(user.status, 'normal')}">正常</option>
                                <option value="forbidden" th:selected="${#strings.equals(user.status, 'forbidden')}">禁用</option>
                                <option value="deleted" th:selected="${#strings.equals(user.status, 'deleted')}">删除</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">我的角色</label>
                        <div class="col-sm-4">
                            <p class="form-control-static">
                                <a class="label label-xs label-success" th:href="${'#/role/' + role.id + '.html'}" th:each="role : ${roles}" style="margin-right:5px;">
                                    <span th:text="${role.name}"></span>
                                    <i th:attr="data-userid=${user.id},data-roleid=${role.id}" class="fa fa-remove role-rm-btn"></i>
                                </a>

                                <a class="label label-xs label-warning add_role_btn" title="添加角色"><i class="fa fa-plus"></i> </a>
                            </p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label"></label>
                        <div class="col-sm-4">
                            <a href="javascript:void(0)" class="btn btn-primary update-btn"><i class="fa fa-check"></i> 保存</a>
                            <a href="javascript:window.history.go(-1)" class="btn btn-default"><i class="fa fa-arrow-left"></i> 返回</a>
                        </div>
                    </div>
                </form>
            </th:block>
        </th:block>

        <th:block layout:include="fragments/ui :: box (title='权限列表', iconClass='fa-bars')">
            <th:block layout:fragment="box-content">
                <div th:include="fragments/ajax-table :: ajax-table (id=UserPermList, head=${ {'ID', '类型', '名称', '描述'} }, ajaxurl=${'/user/' + user.id + '/perm'})"></div>
            </th:block>
        </th:block>
    </th:block>
</th:block>

<!-- add Modal -->
<div class="modal fade" id="addRoleModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">选择角色</h4>
            </div>
            <div class="modal-body">
                <table id="role-modal-list" class="table table-bordered table-hover table-striped" cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>角色名称</th>
                        <th>描述</th>
                        <th width="30">选择</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="role : ${allRoles}">
                        <td th:text="${role.id}"></td>
                        <td th:text="${role.name}"></td>
                        <td th:text="${role.info}"></td>
                        <td><input type="checkbox" name="role-row-chk" th:value="${role.id}" th:attr="data-userid=${user.id},data-roleid=${role.id}"/></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>